<template>
  <div>
    <VolBox
      :model.sync="model.boxOne"
      title="去发送"
      :width="800"
      :height="800"
    >
      <el-row>
        <el-col :span="18"
          ><div class="campName">
            <h3>{{ campsite_name }} {{ phase_name }}</h3>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
  
            <el-button type="primary" size="small" @click="Addschedule()"
              >添加日程</el-button
            >
          </div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="(item, idx) in campgrouping"
              :key="idx"
              :label="item.name"
              :name="item.id"
            >
              <el-row>
                <el-col :span="24">
                  <el-table
                    :data="tableData"
                    style="width: 100%"
                    max-height="250"
                  >
                    <el-table-column fixed prop="Id" label="日期" width="150">
                    </el-table-column>
                    <el-table-column
                      fixed
                      prop="campdate"
                      label="日期"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column prop="sort" label="排序" width="120">
                    </el-table-column>
                    <el-table-column prop="beginTime" label="时间" width="120">
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" width="180">
                      <template slot-scope="scope">
                        <!-- <el-button
                      @click.native.prevent="copyRow(scope.$index, tableData)"
                      type="text"
                      size="small">
                      复制
                    </el-button> -->
                        <!-- <el-button
                          @click.native.prevent="
                            editRow(scope.$index, tableData)
                          "
                          type="text"
                          size="small"
                        >
                          编辑
                        </el-button> -->
                        <el-button
                          @click.native.prevent="
                            deleteRow(scope.row, tableData)
                          "
                          type="text"
                          size="small"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row></el-tab-pane
            >
          </el-tabs>
          <!-- <div style="margin-bottom: 20px;float:left;" ><h3  v-for="(item,idx) in campgrouping" :key="idx" >{{item.name}}</h3></div>-->
        </el-col>
      </el-row>
    </VolBox>
    <VolBox
      :model.sync="model.boxTwo"
      title="新增日程"
      :width="600"
      :height="400"
    >
      <el-form ref="form" :model="scheduleForm" label-width="80px">
        <el-form-item label="日期:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              v-model="scheduleForm.campdate"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="排序:">
          <el-col :span="11">
            <el-input v-model="scheduleForm.sort"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="时间:">
          <el-col :span="11">
            <el-radio-group v-model="scheduleForm.timeType">
              <el-radio label="1">全天</el-radio>
              <el-radio label="2">指定时段</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="11">
            <el-time-picker
              v-model="scheduleForm.date2"
              is-range
              arrow-control
              format="HH:mm:ss"
              placeholder="选择时间范围"
              style="width: 100%;"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="适用小组">
          <el-col :span="11">
            <el-radio-group
              v-model="scheduleForm.resource"
              @change="resource($event)"
            >
              <el-radio label="1">全部小组</el-radio>
              <el-radio label="2">指定小组</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item v-if="scheduleForm.resource == 2">
          <div
            style="float: left;"
            v-for="(item, idx) in campgrouping"
            :key="idx"
          >
            <el-checkbox-group
              v-model="scheduleForm.groupType"
              @change="groupType($event)"
            >
              <el-checkbox
                v-for="(item, idx) in item.group"
                :key="idx"
                :label="item.name"
                name="type"
              ></el-checkbox>
              <!-- <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> -->
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="日程内容">
          <el-col :span="11">
            <el-radio-group v-model="scheduleForm.contentType">
              <el-radio label="1">课程</el-radio>
              <!-- <el-radio label="2">指定小组</el-radio> -->
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="">
          <el-col :span="11">
            <el-radio-group
              v-model="scheduleForm.courseType"
              @change="courseType($event)"
            >
              <el-radio label="1">相同课程</el-radio>
              <el-radio label="2">不同课程</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="全部:" v-if="scheduleForm.courseType == 1">
          <el-col :span="8">
            <el-input
              v-model="scheduleForm.courseName"
              placeholder="课程名称"
            ></el-input>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="scheduleForm.courseTeacher"
              placeholder="授课老师"
            ></el-input>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="scheduleForm.coursePlace"
              placeholder="授课地点"
            ></el-input>
          </el-col>
        </el-form-item>
        <span
          v-if="scheduleForm.courseType == 2 && scheduleForm.courseType == 2"
        >
          <el-form-item
            v-for="(item, idx) in groupTypeval"
            :key="idx"
            :label="item"
          >
            <el-col :span="8">
              <el-input
                v-model="groupTypeval.courseName"
                placeholder="课程名称"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model="groupTypeval.courseTeacher"
                placeholder="授课老师"
              ></el-input>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model="groupTypeval.coursePlace"
                placeholder="授课地点"
              ></el-input>
            </el-col>
          </el-form-item>
        </span>
      </el-form>
      <div slot="footer">
        <Button type="default" @click="onSave()">确认</Button>
        <Button
          type="default"
          @click="
            () => {
              this.model.boxTwo = false;
            }
          "
          >关闭</Button
        >
      </div>
    </VolBox>
    <VolBox
      :model.sync="model.boxThree"
      title="复制日程"
      :width="600"
      :height="400"
    >
      <span
        >选择团:
        <el-select v-model="copyTeam" placeholder="请选择团" multiple>
          <el-option
            v-for="(item, idx) in campgrouping"
            :key="idx"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </span>
      <div slot="footer">
        <Button type="default" @click="onCopyTeam()">确认</Button>
        <Button
          type="default"
          @click="
            () => {
              this.model.boxTwo = false;
            }
          "
          >关闭</Button
        >
      </div>
    </VolBox>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: {
    VolBox
  },
  data() {
    return {
      model: {
        boxOne: false,
        boxTwo: false,
        boxThree: false
      },
      copyTeam: "",
      scheduleForm: {
        name: "",
        region: "",
        sort: "",
        date2: "",
        timeType: "1",
        groupType: [],
        resource: "1",
        sort: "",
        campdate: "",
        contentType: "1",
        courseType: "1",
        courseTeacher: "",
        coursePlace: "",
        courseName: "",
        teamBinding: "",
        content: ""
      },
      activeName: "",
      showOne: true,
      courseTypeval: "",
      campgrouping: [],
      groupTypeval: [],
      campsite_name: "",
      phase_name: "",
      teamnum: "",
      tableData: []
    };
  },
  watch: {
    activeName(n, o) {
      this.onSeach(n);
    }
  },
  methods: {
    openWindowOne(val) {
      console.log(val, "val");
      this.model.boxOne = true;
      this.teamnum = val.teamnum;
      this.campsite_name = val.campsite_name;
      this.phase_name = val.phase_name;
      this.campgrouping = JSON.parse(val.campgrouping);
      this.activeName = this.campgrouping[0].id;
      this.onSeach();
    },
    Addschedule() {
      this.model.boxTwo = true;
    },
    courseType(val) {
      this.courseTypeval = val;
      console.log(val, "val");
      this.campgrouping.forEach(item => {});
    },
    resource(val) {
      if (val == 2 && this.courseTypeval == 2 && this.scheduleForm.type == "") {
        console.log("指定小组");
      }
    },
    groupType(val) {
      this.groupTypeval = val;
      console.log(this.groupTypeval, "this.groupTypeval");
      let obj = {
        courseTeacher: "",
        coursePlace: "",
        courseName: ""
      };
      this.groupTypeval.forEach(item => {
        item.courseTeacher = "", item.coursePlace = ""
        item.courseName = "", this.groupTypeval.push(obj);
      });
      console.log(this.groupTypeval);
    },

    //保存按钮
    onSave() {
      this.scheduleForm.beginTime = this.scheduleForm.date2[0];
      this.scheduleForm.endTime = this.scheduleForm.date2[1];
      this.scheduleForm.teamBinding = this.activeName;
      if (this.groupTypeval.length == 0) {
        this.scheduleForm.content={
        courseTeacher: this.scheduleForm.courseTeacher,
        coursePlace:this.scheduleForm.coursePlace,
        courseName:this.scheduleForm.courseName,

        }
      } else {
        console.log(this.groupTypeval,"this.groupTypeval")
        
      }
   console.log(this.scheduleForm, "researchersdd");
      // this.scheduleForm.content=this.scheduleForm.groupType
      let param = { mainData: this.scheduleForm };
   
      this.http.post("/api/Camp_schedule/Add", param).then(res => {
        if (res.status) {
          this.model, (boxTwo = false);
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //查询接口
    onSeach() {
      let param = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "id",
        wheres: `[{\"name\":\"teamBinding\",\"value\":\"${this.activeName}\",\"displayType\":\"text\"}]`
      };
      this.http.post("/api/camp_schedule/getPageData", param).then(res => {
        console.log(res.rows, "123");
        this.tableData = res.rows;
      });
    },
    copyRow(row) {
      this.model.boxThree = true;
      console.log(row, "row---");
    },
    onCopyTeam() {},
    deleteRow(row) {
      this.http.post("/api/camp_schedule/del", [row.Id]).then(res => {
        if (res.status) {
          this.$Message.success("删除成功");
          this.onSeach();
        } else {
          this.$Message.error("删除失败");
        }
      });
    }
  },
  mounted() {}
};
</script>

<style scoped>
.campName {
  font-size: 18px;
  margin-bottom: 1rem;
}
</style>

<style></style>
